<style>
    .CodeMirror {
        padding: 0px 10px;
    }
    .CodeMirror, .CodeMirror-scroll {
        min-height: 130px;
        max-height: 200px;
        border-radius: 4px
    }
    .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
        background: none;
    }
</style>
<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">网站管理</a></li>
        <li class="active">评论管理</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <form id="formSearch" class="form-horizontal form-search">
            <div class="form-group">
                <div class="col-md-3 col-sm-6">
                    <label class="control-label  col-xs-4">状态:</label>
                    <div class="col-xs-8">
                        <select id="status" class="form-control">
                            <option value="">请选择</option>
                            <option value="0">待审核</option>
                            <option value="1">审核通过</option>
                            <option value="2">审核失败</option>
                        </select>
                    </div>
                </div>
                <shiro:hasPermission name="comment:list">
                    <div class="col-md-1 col-sm-6 " style="text-align:left;">
                        <button type="button" id="btn_query" class="btn btn-info">查询</button>
                    </div>
                </shiro:hasPermission>
            </div>
        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group">
            <shiro:hasPermission name="comment:batchDelete">
            <button id="btn_batch_delete" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除
            </button>
            </shiro:hasPermission>
        </div>
        <table id="table"></table>
    </div>
</section>

<!-- 回复评论模态框 -->
<div id="replyCommentModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">回复评论</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="replyForm">
                    <input id="replyPid" name="pid" type="hidden">
                    <input id="replySid" name="sid" type="hidden">
                    <div class="box-body">
                        <div class="form-group">
                            <div class="col-xs-12">
                                <textarea id="replyArea" name="content"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="saveReply" class="btn btn-info">确定</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 审核评论模态框 -->
<div id="auditCommentModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">审核评论</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="auditForm">
                    <input id="auditId" name="id" type="hidden">
                    <input id="auditSid" name="sid" type="hidden">
                    <div class="box-body">
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">审核状态 :</label>
                            <div class="col-sm-8">
                                <select name="status" class="form-control" require="必填项">
                                    <option value="1">审核通过</option>
                                    <option value="2">审核失败</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="">回复内容:</label>
                            <div class="col-sm-8">
                                <textarea id="auditArea" name="replyContent"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="saveAudit" class="btn btn-info">确定</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    var replyFlag = "[[${@perms.hasPerm('comment:reply')}]]";
    var deleteFlag = "[[${@perms.hasPerm('comment:delete')}]]";
    var auditFlag = "[[${@perms.hasPerm('comment:audit')}]]";
    var replySimplemde,auditSimplemde;
    var columns = [
        {checkbox: true },
        {
            field: 'nickname',
            title: '作者',
            align : "left",
            formatter : function(value,row) {
               return value;
            }
        },{
            field: 'email',
            title: '邮箱',
            align : "center"
        },{
            field: 'ip',
            title: 'ip',
            align : "center",
        },{
            field: 'content',
            title: '内容',
            align : "left",
            formatter : function(value,row) {
                var rtn=value;
                if(row.parent!=null){
                    rtn+='<div class="comment-parent">原评：'+row.parent.content+'</div>'
                }
                return rtn;
            }
        },{
            field: 'support',
            title: '赞/踩',
            align : "center",
            formatter : function(value,row) {
                return row.support+'/'+row.oppose
            }
        },{
            field: 'status',
            title: '状态',
            align : "center",
            formatter : function(value) {
               if(value==0){
                   return '待审核'
               }else if(value==1){
                   return '审核通过'
               }else if(value==2){
                   return '审核失败'
               }
            }
        },
        {
            field : 'operation',
            title : '操作',
            align : "center",
            class:'min-width-150',
            formatter : function(value,
                                 row, index) {
                var reply = replyFlag=="true"&&row.status==1 ? '<a class="table-btn table-btn-info" onclick="replyComment('+row.id+','+row.sid+')">回复</a>' : '';
                var audit = auditFlag=="true"&&row.status==0 ? '<a class="table-btn table-btn-info" onclick="auditComment('+row.id+','+row.sid+')">审核</a>' : '';
                var del = deleteFlag=="true" ? '<a  class="table-btn table-btn-danger" onclick="deleteComment('+row.id+')">删除</a>' : '';
                return reply + audit + del;
            }
        }];
    var options={
        id:"#table",
        url: '/comment/list',
        columns:columns,
        toolbar: '#toolbar',
        showRefresh: true,
        escape: false,//html转意
        queryParams : queryParams
    }
    Core.initTable(options);

    /*查询参数*/
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit : params.limit, //页面大小
            offset : params.offset, //页码
            status : $("#status").val()
        };
        return temp;
    }

    /*回复*/
    function replyComment(id,sid) {
        $("#replyPid").val(id);
        $("#replySid").val(sid);
        $("#replyArea").val("");
        $("#replyArea").nextAll().remove();
        replySimplemde = new SimpleMDE({
            element: document.getElementById("replyArea"),
            toolbar: [],
            autoDownloadFontAwesome: false,
            placeholder: "请输入回复内容",
            renderingConfig: {
                codeSyntaxHighlighting: true
            },
            tabSize: 4,
            status:false
        });
        $("#replyCommentModal").modal("show");
    }
    /*审核*/
    function auditComment(id,sid) {
        $("#auditId").val(id);
        $("#auditSid").val(sid);
        $("#auditArea").val("");
        $("#auditArea").nextAll().remove();
        auditSimplemde = new SimpleMDE({
            element: document.getElementById("auditArea"),
            toolbar: [],
            autoDownloadFontAwesome: false,
            placeholder: "请输入回复内容",
            renderingConfig: {
                codeSyntaxHighlighting: true
            },
            tabSize: 4,
            status:false
        });
        $("#auditCommentModal").modal("show");
    }
    /*删除*/
    function deleteComment(id) {
        Core.confirm("确定删除该评论？",function () {
            Core.postAjax("/comment/delete",{"id":id},function (data) {
                if(data.status==200){
                    Core.refreshTable("#table");
                }
                layer.msg(data.msg);
            })
        })
    }
    $(function () {
        /*查询*/
        $("#btn_query").click(function(){
            Core.refreshTable("#table");
        });
        /*新增*/
        $("#btn_add").click(function(){
            Core.clearError("#commentForm");
        });
        /*保存回复内容*/
        $("#saveReply").click(function(){
            var content = replySimplemde.value();
            if(content==""){
                layer.msg("请输入回复内容！")
                return;
            }
            $("#replyArea").val(replySimplemde.markdown(content));
            Core.mask("#saveReply");
            Core.postAjax("/comment/reply",$("#replyForm").serialize(),function (data) {
                Core.unmask("#saveReply");
                if(data.status==200){
                    $("#replyCommentModal").modal("hide");
                    Core.refreshTable("#table");
                }
                layer.msg(data.msg);
            })
        });
        /*保存审核*/
        $("#saveAudit").click(function(){
            $("#auditArea").val(auditSimplemde.markdown(auditSimplemde.value()));
            Core.mask("#saveAudit");
            Core.postAjax("/comment/audit",$("#auditForm").serialize(),function (data) {
                Core.unmask("#saveAudit");
                if(data.status==200){
                    $("#auditCommentModal").modal("hide");
                    Core.refreshTable("#table");
                }
                layer.msg(data.msg);
            })
        });
        /*批量删除*/
        $("#btn_batch_delete").click(function(){
            var checkedRows= Core.selectMutiData("#table");
            if(checkedRows){
                Core.confirm("确定删除选中的"+checkedRows.length+"条记录？",function () {
                    var ids=[];
                    $.each(checkedRows, function (i, item) {
                        ids.push(item.id);
                    })
                    Core.postAjax("/comment/batch/delete", {"ids": ids}, function (data) {
                        if (data.status == 200) {
                            Core.refreshTable("#table");
                        }
                        layer.msg(data.msg);
                    })
                })
            }
        });
    });

</script>